<template>
	<view class="audio">
		<!-- <canvas :canvas-id="musicId" :id="musicId" 
		:style="{'height': canvas.h + 'px',width: canvas.w + 'px'}"></canvas> -->
		<img :src="imgSrc" style="width: 16px; height: 16px;" alt="">
		
	</view>
</template>

<script>
	export default {
		props: {
			id: String,
			music: String
		},
		data() {
			return {
				ctx: null,
				isPlay: false,
				canvas: {
					w: 18,
					h: 18
				},
				duration: 0,
				audioAction: {
					method: 'puase'
				},
				musicId: this.id,//获取音乐ID绘制canvas
				previousMusicId: '',//上一个音乐ID
				imgSrc: 'https://cdn3.relaverse.cn/appfile/pause.png'
			}
		},
		methods: {
			/**
			 * 点击准备播放
			 * @param {Number} id  音频ID
			 * @param {String} src 音频路径
			 */
			onPlays(id, src, type){
				this.previousMusicId = this.id
				this.musicId = id
				this.isPlay = type
				if (this.isPlay) {
					this.imgSrc = 'https://cdn3.relaverse.cn/appfile/play.png'
					// this.initCanvas(0, 1)
				} else {
					this.imgSrc = 'https://cdn3.relaverse.cn/appfile/pause.png'
					// this.initCanvas(0, 2)
				}
			},
			/**
			 * 
			 */
			initCanvas(progress = 0, type) {
				this.ctx.drawImage(this.imgSrc,this.canvas.w * 0.1,this.canvas.w * 0.1,this.canvas.w * 0.8,this.canvas.h * 0.8)
					this.drawArc(this.canvas.w/2,this.canvas.h/2,8,0,Math.PI*2,'#B4BAD5',1)
					// this.drawSence(progress)
					this.ctx.draw()
			},
			clearCanvas() {
				this.ctx.clearRect(0,0,this.canvas.w,this.canvas.h)
			},
			drawSence(progress = 0) {
				this.drawArc(this.canvas.w/2,this.canvas.h/2,8,1.5 * Math.PI,(progress * 2 + 1.5) * Math.PI,'#00B49D',1)
				this.ctx.draw(true)
			},
			drawArc(x,y,r,sAngle,eAngle,color,lineWidth) {
				this.ctx.beginPath()
				this.ctx.lineCap = 'round'
				this.ctx.arc(x,y,r,sAngle,eAngle)
				this.ctx.setLineWidth(lineWidth)
				this.ctx.setStrokeStyle(color)
				this.ctx.stroke()
			}
		}
	}
</script>

<style scoped lang="scss">
	.audio{
	}
</style>